<template>
  <div class="wrap">
    <!-- <van-search 
    v-model="value"
     shape="round" 
     background="#FFFFFF"
      show-action placeholder="请输入搜索内容"
       @search="onSearch"
        @cancel="onCancel" /> -->
    <van-search 
    v-model="value" 
    shape="round"  
    show-action 
    placeholder="请输入搜索内容"  
    @search="onSearch"   
    @cancel="onCancel"
    @clear="onClear"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <!-- <div @click="onSearch">搜索</div> -->
    <!-- 历史记录： -->
    <div class="serachHistory" v-if="resHistoryList.length > 0 && !showDataList">
      <div class="historyItem" v-for="(item, index) in resHistoryList" :key="index">
        <img src="@/assets/clock.png" alt="" class="clock" />
        <em @click="clickItem(item)">{{ item }}</em>
        <img src="@/assets/close.png" alt="" class="close" @click="deleItem(item)" />
      </div>
      <div class="historyItem deleHistory" @click="deleAll">清除搜索记录</div>
    </div>
    <!-- 搜索结果列表： -->

    <div class="serachHistory" v-else>
      <div class="titleWrap">
        <div class="titleItem" :class="{ titleItemActiv: titleWhich == 0 }" @click="titleClick(0)">商城</div>
        <div class="titleItem" :class="{ titleItemActiv: titleWhich == 1 }" @click="titleClick(1)">店家</div>
      </div>
      <div class="filterWrap">
        <div class="filterItem" @click="show = true">
          {{ towerInfo.addressName }}
          <img src="@/assets/paixu.png" alt="" />
        </div>
        <div class="filterItem filterItemLine"></div>
        <div class="filterItem" @click="orderBy()">
          销量
          <img src="@/assets/paixu.png" alt="" />
        </div>
      </div>
      <!-- 商城： -->
      <!-- <div class="productList" v-if="titleWhich == 0 && resShopGoodsList.length > 0">
        <div class="proItem" v-for="(item, index) in resShopGoodsList" :key="index" @click="jumpGoodsInfo(item)">
          <img :src="$imgUrl + item.listImgUrl" alt="" class="leftProPoster" />
          <div class="rightProIntro">
            <div class="proTitle">
              {{ item.goodsName }}
            </div>
            <div class="saleNum">已售{{ item.saleNum }}</div>
            <div class="price"><em>￥</em>{{ item.price }}</div>
          </div>
        </div>
      </div> -->

          <div v-if="titleWhich == 0 && resShopGoodsList.length > 0">
           <div
              class="productItem"
             v-for="(item, index) in resShopGoodsList" :key="index" @click="jumpGoodsInfo(item)"
            >
              <img :src="$imgUrl + item.listImgUrl" alt="" class="proPosterLeft" />
              <div class="proIntroRight2">
                <p class="proTitle2">{{ item.goodsName }}</p>
                <div class="saleNum">已售{{ item.saleNum }}</div>
                <div class="priceWrap2">
                  <em class="price2">￥{{ item.price }}</em>
                </div>
              </div>
            </div>
            </div>



      <!-- 店家： -->
      <div class="productList" v-if="titleWhich == 1 && resShopList.length > 0">
        <div class="productionItem" v-for="(item, index) in resShopList" :key="index" @click="jumpShopInfo(item.id)">
          <div class="proTitle">
            <div class="proLeft">{{ item.shopName }}</div>
            <div class="proRight">{{ item.shopDetailsAddress }}</div>
          </div>
          <div class="proIntroWrap">
            <div class="proIntroLeft">
              <img :src="$imgUrl + item.headImg" alt="" class="proPoster" />
              <!-- <img src="@/assets/vip.png" alt="" class="vipImg" /> -->
            </div>
            <div class="proIntroRight">
              <div class="proIntro">
                {{ item.intro }}
              </div>
              <div class="salePrice" v-if="item.appCouponList.length > 0">
                <em v-for="(item_, index_) in item.appCouponList" :key="index_">{{ item_.thresholdPrice }}减{{ item_.discountsPrice }}</em>
                <i v-for="(item_, index_) in item.appCouponList" :key="index_" v-if="index_ % 2 == 0"></i>
              </div>
              <div class="salePrice" v-else>暂无优惠</div>
              <div class="workTime">
                <div class="timeLeft">营业：{{ item.startBusinessTime }}-{{ item.endBusinessTime }}</div>
                <div class="saleRight">销量:{{ item.totalSaleNum }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="productList" style="font-size: 12px; color: #666; margin-top: 30px; text-align: center" v-if="(titleWhich == 0 && resShopGoodsList.length == 0) || (titleWhich == 1 && resShopList.length == 0)">暂无数据...</div>
    </div>
    <div class="pickerMask">
      <van-popup v-model="show">
        <van-picker show-toolbar title="选择宿舍" :columns="columns" @confirm="onConfirm" @cancel="onCancelDormList" @change="onChange"> </van-picker>
      </van-popup>
    </div>
  </div>
</template>

<script>
import { Search, Picker, Popup } from 'vant';
import { apiHomeSearch, apiUserHistorySearchList, apiClearUserHistorySearch, apiDelUserHistorySearch, apiAddressList } from '@/request/api'; // api接口
export default {
  name: 'App',
  data() {
    return {
      schoolId: '', //校区id
      titleWhich: 0, //0是商城，1是店家
      value: '',
      resShopGoodsList: [], //商城商品列表
      resShopList: [], //店铺列表
      resHistoryList: [], //搜索历史列表
      show: false,
      columns: ['全部宿舍'],
      resDormList: '', //宿舍楼列表
      towerInfo: {
        addressName: '宿舍',
        id: '',
      }, //选择的宿舍楼信息
      isAsc: 'desc', //排序
      showDataList: false,
    };
  },
  mounted() {
    this.schoolId = JSON.parse(sessionStorage.getItem('changeSchoolData')).schoolId;
    this.getUserHistorySearchList();
    this.getAddressList();
  },
  methods: {
    //搜索列表：
    getHomeSearch() {
      if (!this.value) {
        this.$toast.fail('请输入内容');
        return;
      }
      apiHomeSearch({
        keyWord: this.value,
        schoolId: this.schoolId,
        orderByColumn: 'saleNum',
        isAsc: this.isAsc,
      }).then((res) => {
        this.showDataList = true;
        this.resSearchList = res.data;
        this.resShopGoodsList = res.data.appShopGoodsList;
        this.resShopList = res.data.appShopList;
        this.getUserHistorySearchList();
        console.log('搜索结果', this.resSearchList);
      });
    },
    //搜索历史列表：
    getUserHistorySearchList() {
      apiUserHistorySearchList({}).then((res) => {
        this.resHistoryList = res.data;
        console.log('搜索历史', this.resHistoryList);
      });
    },
    //清空所有的历史记录：
    deleAll() {
      apiClearUserHistorySearch({}).then((res) => {
        if (res.code == 200) {
          this.$toast.success('已清除!');
          this.getUserHistorySearchList();
        }
      });
    },
    //删除单个历史记录：
    deleItem(data) {
      apiDelUserHistorySearch({
        keyWord: data,
      }).then((res) => {
        this.getUserHistorySearchList();
      });
    },
    //点击商城or店家
    titleClick(i) {
      this.titleWhich = i;
    },
    //获取某校区宿舍楼列表：
    getAddressList() {
      apiAddressList({
        id: this.schoolId,
      }).then((res) => {
        this.resDormList = res.data;
        this.resDormList.map((item) => {
          this.columns.push(item.addressName);
        });
        console.log('宿舍楼', this.resDormList);
        console.log('columns', this.columns);
      });
    },
    //切换销量：
    orderBy() {
      this.isAsc = this.isAsc == 'desc' ? 'asc' : 'desc';
      this.getHomeSearch();
    },
    //切换宿舍：
    onConfirm(value, index) {
      // console.log('选择的宿舍',value,index)
      this.show = false;
      var index_ = index - 1;
      this.towerInfo.addressName = index_ < 0 ? '宿舍' : this.resDormList[index_].addressName;
      this.towerInfo.id = index_ < 0 ? '' : this.resDormList[index_].id;
      this.getHomeSearch();
    },
    //点击历史记录item
    clickItem(data) {
      this.value = data;
      this.getHomeSearch();
    },
    onChange(picker, value, index) {},
    onCancelDormList() {
      this.show = false;
    },
    //搜索动作：
    onSearch(val) {
      this.getHomeSearch();
    },
    onCancel() {
      this.resShopGoodsList = [];
      this.showDataList = false;
      this.$router.go(-1)
    },
    onClear(){
      this.resShopGoodsList = [];
      this.showDataList = false;
      this.$router.go(-1)
    },
    jumpShopInfo(id) {
      this.$router.push({
        path: '/pages/shopInfo',
        query: {
          //传递参数
          shopId: id,
        },
      });
    },
    //跳转商品详情：
    jumpGoodsInfo(data) {
      this.$router.push({
        path: '/pages/goodsInfo',
        query: {
          GoodsId: data.id,
          shopId: data.shopId,
        },
      });
    },
    jumpBanner() {
      this.$router.push({
        path: '/pages/bannerInfo',
        query: {
          //传递参数
        },
      });
    },
  },
  created() {},
  components: {
    [Search.name]: Search,
    [Picker.name]: Picker,
    [Popup.name]: Popup,
  },
};
</script>

<style scoped>

.productItem {
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.proPosterLeft {
  width: 24%;
  height: 75px;
}
.proIntroRight2 {
  width: 70%;
}
.proTitle2 {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0px;
}
.saleNum2 {
  margin-top: 9px;
  font-size: 10px;
  font-weight: 300;
  color: #666666;
  text-align: left;
  margin-bottom: 0px;
}
.priceWrap2 {
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
}
.price2 {
  font-size: 10px;
  font-weight: bold;
  color: #ff4646;
}





.wrap {
  background-color: #f2f3f9;
  /* min-height: 100vh;
  padding: 0px 15px;
  padding-top: 20px; */
}
.serachHistory {
  /* width: 100%; */
  border-radius: 20px 20px 0px 0px;
  background-color: #ffffff;
  padding: 7px 30px 0px 30px;
  margin-top: 15px;
  min-height: 76vh;
}
.historyItem {
  font-size: 13px;
  font-weight: 300;
  color: #181818;
  overflow: hidden;
  margin-top: 23px;
}
.clock {
  width: 15px;
  height: 15px;
  margin-right: 10px;
  float: left;
}
em {
  float: left;
}
.close {
  width: 10px;
  height: 10px;
  float: right;
  margin-left: 30px;
}
.deleHistory {
  border-top: 1px solid #e5e5e5;
  text-align: center;
  padding-top: 23px;
  padding-bottom: 23px;
}
.serachHistory {
}
.titleWrap {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.titleItem {
  padding: 12px 40px;
  font-size: 14px;
  font-weight: 400;
  color: #666666;
}
.titleItemActiv {
  background: #181818;
  border-radius: 19px;
  color: #ffffff;
}
.filterWrap {
  width: calc(100% - 26px);
  height: 34px;
  line-height: 34px;
  background: #f6f7f9;
  border-radius: 17px;
  font-size: 12px;
  font-weight: 500;
  color: #666666;
  padding-left: 26px;
  margin-top: 10px;
}
.filterItem {
  float: left;
  margin-right: 15px;
}
.filterItem > img {
  width: 5px;
  height: 5px;
  padding-bottom: 2px;
}
.filterItemLine {
  height: 15px;
  width: 1px;
  background-color: #e5e5e5;
  margin-top: 10px;
}
.productList {
}

.proItem {
  margin-top: 20px;
}

.leftProPoster {
  width: 25%;
  height: 75px;
  float: left;
  margin-right: 11px;
}

.rightProIntro {
  float: left;
  width: 71%;
}

.proTitle {
  font-size: 14px;
  font-weight: 500;
  color: #000000;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.saleNum {
  font-size: 10px;
  font-weight: 300;
  color: #666666;
  text-align: left;
  margin-top: 10px;
}
.price {
  font-size: 15px;
  font-weight: bold;
  color: #ff4646;
  text-align: left;
  margin-top: 3px;
}
em {
  font-size: 10px;
  font-weight: 400;
}

.productionItem {
  width: calc(100% - 30px);
  min-height: 130px;
  background: #ffffff;
  padding: 15px;
  margin-top: 15px;
}
.proTitle {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.proLeft {
  font-size: 15px;
  font-weight: 500;
  color: #181818;
}
.proRight {
  font-size: 10px;
  font-weight: 300;
  color: #666666;
}
.proIntroWrap {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.proIntroLeft {
}
.proPoster {
  width: 25%;
  /* height: 75px; */
  position: absolute;
}
.vipImg {
  width: 30px;
  height: 15px;
  position: absolute;
  left: 90px;
}
.proIntroRight {
  width: 65%;
}
.proIntro {
  font-size: 10px;
  font-weight: 400;
  color: #181818;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.salePrice {
  font-size: 9px;
  font-weight: 400;
  color: #ff5252;
  /* padding: 3px 8px; */
  border: 1px solid #ff5252;
  border-radius: 7px;
  width: 100px;
  margin: 10px 0px 5px 0px;
}
em {
  font-style: normal;
}
i {
  display: inline-block;
  width: 1px;
  height: 10px;
  background-color: #ff5252;
  margin: 0px 2px;
}
.workTime {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 400;
  color: #999999;
}
.pickerMask {
}
.van-picker {
  width: 100vw;
}
.van-popup--center {
  top: 77%;
}
</style>
